<template>
	<view class="app-start">
		<view class="start">
			<image :animation="animationData" class="logo" :src="startIcon" mode=""></image>
			<span class="wel">打开生活，发现美好</span>
			<view class="next" @click="home">
				<image :src="nextIcon" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { start_icon, next_icon }  from '../../static/svg/index.js'
	export default {
		mounted() {
		},
		data() {
			return {
				startIcon: start_icon,
				nextIcon: next_icon,
				animationData: {}
			};
		},
		 onShow: function(){
		    var animation = uni.createAnimation({
		      duration: 1000,
		        timingFunction: 'ease',
		    })
			
		    this.animation = animation
		
		    animation.rotate(45).step()
			animation.rotate(-90).step()
		
		    this.animationData = animation.export()
		
		    // setTimeout(function() {
		    //   animation.translate(30).step()
		    //   this.animationData = animation.export()
		    // }.bind(this), 1000)
		  },
		   methods:{
		      home () {
				  uni.navigateTo({
				  	url: '../login/login',
					animationDuration: 300,
					animationType: 'pop-in'
				  })
			  }
		    }
	}
</script>
<style lang="less">
.app-start {
	width: 100%;
	height: 100vh;
	background-image: url(../../static/img/app_start.png);
	background-size: 100% 100%;
	background-color: #007AFF;
	.start {
		position: absolute;
		top: 628upx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.logo {
			width: 120upx;
			height: 120upx;
		}
		.wel {
			margin-top: 40upx;
			margin-bottom: 60upx;
			font-size: 30upx;
			line-height: 42upx;
			color: #FFFFFF;
		}
		.next {
			width: 108upx;
			height: 108upx;
			border-radius: 50%;
			background-color: #E83434;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				width: 42upx;
				height: 42upx;
			}
		}
	}
}
</style>
